<template>
  <div id="app">
    <transition :enter-active-class="$store.state.common.router_in_way=='go'?right_in:left_in"
                :leave-active-class="$store.state.common.router_in_way=='go'?left_out:right_out">
      <router-view class="routerview"/>
    </transition>
    <!-- <router-view/> -->
    <loading></loading>
    <transition name="slide-fade">
      <Account v-if="$store.state.account.show_account_view"></Account>
    </transition>

    <transition name="slide-fade">
      <MyAddress v-if="$store.state.address.show_address_view"></MyAddress>
    </transition>

    <transition name="slide-fade">
      <UploadImg></UploadImg>
    </transition>

    <transition name="slide-fade">
      <Discount v-if="$store.state.goods.show_discount_box"></Discount>
    </transition>

    <transition>
      <PaySucc v-show="$store.state.confirm.show_pay_succ_view"></PaySucc>
    </transition>

    <transition name="slide-fade">
      <ChangePhone v-if="$store.state.account.show_change_phone_view"></ChangePhone>
    </transition>

    <transition name="slide-fade">
      <Search v-if="$store.state.common.show_search_view"></Search>
    </transition>

    <transition name="slide-fade">
      <EditUserInfo v-if="$store.state.home_status.show_edit_user_info_view"></EditUserInfo>
    </transition>

    <transition name="slide-fade">
      <ShareGroup v-if="$store.state.goods.show_share_group_view"></ShareGroup>
    </transition>

    <transition name="slide-fade">
      <OrderDetail v-if="$store.state.goods.open_order_detail_view"></OrderDetail>
    </transition>

  </div>
</template>

<script>
  // loading 组件
  import loading from "./components/Loading";
  // 地址管理组建
  import MyAddress from '@/page/my/MyAddress'
  // 图片上传组件
  import UploadImg from "./components/UploadImg"
  // 支付成功页面
  import PaySucc from "./page/home/PaySucc"
  // 更换手机号组建
  import ChangePhone from "./page/my/ChangePhone"
  // 搜索组件
  import Search from "./page/Search"
  // 登陆组件
  import Account from "./components/Account";
  // 本地存储 管理 模块
  import ls from "@/tools/localstorage";
  // 订单详情组件
  import OrderDetail from "@/page/my/order_detail"
  // plus模块 在 mui.plusReady() 中调用
  import h5_plus from "@/tools/h5_plus";
  // 编辑用户信息
  import EditUserInfo from "./page/my/edit_user_info"

  import ShareGroup from "./page/shop/share_group"

  import Discount from './page/shop/goods/Discount'

  import goods_ajax from "./ajax/goods_ajax"

  const notempty = function (arr) {
    for (var i = 0; i < arr.length; i++) {
      if (arr[i] == "" || typeof arr[i] == "undefined") {
        arr.splice(i, 1);
        i--;
      }
    }
    return arr;
  };


  export default {
    name: "App",
    created() {
      // 用户信息
      var user_info = ls.get("user_info");
      if (user_info) {
        // 更新状态管理中的用户信息
        this.$store.commit("up_data_user", user_info);
      } else {
        mui.toast("请先登陆");
      }
      // 已绑定社区不定位 未绑定社区，进行定位
      if (user_info && user_info.comyname) {
        // 已绑定社区 不用定位
        if (this.$store.state.account.community && this.$store.state.account.community.sqid == user_info.comyid) {
          // 绑定社区 与缓存社区信息相同，不用 更新
        } else {
          // 直接更新社区信息
          this.$store.commit("up_data_community", {
            name: user_info.comyname,
            id: user_info.comyid,
            sqid: user_info.comyid
          });
        }
      } else {
        // 定位社区
        var that = this;
        mui.plusReady(function () {
          h5_plus.get_position(res => {
            // 定位社区成功，改变状态中的社区信息
            that.$store.commit("up_data_community", res);

          });
        });
      }
    },

    data() {
      return {
        //定义动画
        left_in: "animated slideInLeft",
        left_out: "animated slideOutLeft",
        right_in: "animated slideInRight",
        right_out: "animated slideOutRight"
      };
    },
    mounted() {
      let that = this;
      mui.plusReady(function () {
        h5_plus.check_boot_stype(
          function (orderid) {
            // 商品分享
            // alert("商品分享callback");
            console.log("商品分享callback")
          }, function (orderid, sid) {
            // 拼团分享
            // alert("拼团分享callback");
            console.log("拼团分享callback");
            // 获取拼团商品信息
            goods_ajax.get_share_group_goods_info({
              orderid
            }, res => {
              that.$store.commit("updata_share_group_goods_info", res);
              that.$store.commit("updata_share_group_type", 'join');
              that.$store.commit("updata_share_group_sid", {
                sid: sid,
                orderid: orderid
              })
              that.$store.commit("open_share_group_view", true)
            })
            // this.$store.commit("show_share_group_view",true)

          }
        )
      })


    },
    watch: {
      $route(to, from) {

        var to_arr = notempty(to.path.split("/"));
        var from_arr = notempty(from.path.split("/"));
        var toDepth = to_arr.length;
        var fromDepth = from_arr.length;
        if (toDepth < fromDepth) {
          // slide-right
          console.log("back");
          this.$store.commit("change_router_animate_way", "back");
        } else {
          //slide-left
          console.log("go");

          this.$store.commit("change_router_animate_way", "go");
        }
      }
    },
    components: {
      loading,
      Account,
      MyAddress,
      UploadImg,
      Discount,
      PaySucc,
      ChangePhone,
      Search,
      EditUserInfo,
      ShareGroup,
      OrderDetail
    }
  };
</script>


<style lang="less">
  @import "../static/pxvalue.less";

  html,
  body,
  #app {
    height: 100%;
  }

  #bd_xjxq {
    img {
      width: 100% !important;
    }
  }

  body {
    background-color: #fff;
  }

  .mui-toast-container {
    z-index: 99999999;
  }

  .mui-toast-message {
    z-index: 99999999;
  }

  .mask {
    position: fixed;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.4);
    top: 0;
    left: 0;
    z-index: 999;
  }

  .content {
    padding-top: @p80;
  }

  .ptsp_goods_info {
    img {
      float: left;
    }
  }

  .ptsp_goods_info p {
    margin-bottom: 0;
  }

  .routerview {
    position: absolute;
    width: 100%;
    height: 100%;
  }

  .view_box {
    height: 100%;
  }

  .search-group-list .item .info .des p {
    font-size: 0.6rem;
  }

  .search-group-list .item .info .des {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;

  }

  .arr_left {
    background-image: url(./assets/images/left_arr_03.png);
    background-size: 24px 24px;
    background-position: center;
    background-repeat: no-repeat;
    position: relative;
    top: 10px;
    left: @p20;
  }

  .mui-bar {
    box-shadow: 0 0 10px #ccc;
    background: #fff;
  }

  .fl {
    float: left;
  }

  .fr {
    float: right;
  }

  .hr_20 {
    height: @p20;
    background-color: #f6f6f6;
  }

  .slide-fade-enter-active {
    transition: all 0.1s linear;
  }

  .slide-fade-leave-active {
    transition: all 0.1s linear;
  }

  .slide-fade-enter,
  .slide-fade-leave-to {
    transform: translateY(30px);
    opacity: 0.7;
  }

  .fade-enter-active {
    transition: all 0.1s linear;
  }

  .fade-leave-active {
    transition: all 0.1s linear;
  }

  .fade-enter,
  .fade-leave-to {
    opacity: 0.7;
  }

  input[type=color], input[type=date], input[type=datetime-local], input[type=datetime], input[type=email], input[type=month], input[type=number], input[type=password], input[type=search], input[type=tel], input[type=text], input[type=time], input[type=url], input[type=week], select, textarea {
    padding: 0;
    margin: 0;

  }

  .mui-backdrop {
    z-index: 10005;
  }

  .mui-poppicker {
    z-index: 10009;
  }

  .discount_box {
    position: fixed;
    left: 0;
    /*top: 0;*/
    width: 100%;
    bottom: 0;
    z-index: 999999;
    background-color: #fff;
    padding-bottom: 0.64rem;
  }

  .discount_box .title {
    text-align: center;
    font-size: 0.64rem;
    padding-top: 0.64rem;
    padding-bottom: 0.64rem;
  }

  .discount_box .discount_list .discount_item {
    position: relative;
    width: 100%;
    height: 4.4373rem;
    background-image: url(./assets/images/ptsp/discount2.png);
    background-size: 100% 100%;
  }

  .discount_box .discount_list .discount_item .price {
    position: absolute;
    top: 1.1947rem;
    left: 2.432rem;
    color: #1c83fc;
  }

  .discount_box .discount_list .discount_item .price .price_tag {
    font-size: 0.5973rem;
  }

  .discount_box .discount_list .discount_item .price .price_num {
    font-size: 1.28rem;
  }

  .discount_box .discount_list .discount_item .price_text {
    position: absolute;
    top: 2.6027rem;
    left: 2.432rem;
    color: #1c83fc;
    font-size: 0.64rem;
  }

  .discount_box .discount_list .discount_item .des_text {
    position: absolute;
    top: 1.3867rem;
    left: 6.5067rem;
    font-size: 0.512rem;
  }

  .discount_box .discount_list .discount_item .des_date {
    position: absolute;
    top: 2.6027rem;
    left: 6.5067rem;
    font-size: 0.4267rem;
    color: #989898;
  }

  .discount_box .discount_list .geted {
    background-image: url(./assets/images/ptsp/discount1.png);
  }
</style>
